<template>
    <path class="v-tree__link-base"
        :d="linkPath"
        :style="initStyle"
        :ref="`link-${linkData.data.id}`" />
</template>

<script>
/**
 * @file link.vue
 * @author lili39@didichuxing.com
 * @date 2018-08-28 20:54:38
 */
import { select } from 'd3';

import { typeOf } from './helper';

export default {
    name: 'Link',
    props: [
        'pathFunc',
        'direction',
        'nodeSize',
        'linkData',
        'transitionDuration'
    ],
    data() {
        return {
            initStyle: {
                opacity: 0
            }
        };
    },
    computed: {
        startPoint() {
            const d = this.linkData;
            let start = {};
            if (this.direction === 'horizontal') {
                start = {
                    x: d.parent.y + this.nodeSize.x / 2,
                    y: d.parent.x
                };
            } else {
                start = {
                    x: d.parent.x,
                    y: d.parent.y + this.nodeSize.y / 2
                };
            }
            return start;
        },
        endPoint() {
            const d = this.linkData;
            let end = {};
            if (this.direction === 'horizontal') {
                end = {
                    x: d.y - this.nodeSize.x / 2,
                    y: d.x
                };
            } else {
                end = {
                    x: d.x,
                    y: d.y - this.nodeSize.y / 2
                };
            }
            return end;
        },
        straight() {
            let path = '';
            const centerY = (this.endPoint.y + this.startPoint.y) / 2;
            const centerX = (this.endPoint.x + this.startPoint.x) / 2;
            if (this.direction === 'vertical') {
                path =
                    'M' +
                    this.endPoint.x +
                    ',' +
                    this.endPoint.y +
                    ' ' +
                    this.endPoint.x +
                    ',' +
                    centerY +
                    ' ' +
                    this.startPoint.x +
                    ',' +
                    centerY +
                    ' ' +
                    this.startPoint.x +
                    ',' +
                    this.startPoint.y;
            }
            if (this.direction === 'horizontal') {
                path =
                    'M' +
                    this.endPoint.x +
                    ',' +
                    this.endPoint.y +
                    ' ' +
                    centerX +
                    ',' +
                    this.endPoint.y +
                    ' ' +
                    centerX +
                    ',' +
                    this.startPoint.y +
                    ' ' +
                    this.startPoint.x +
                    ',' +
                    this.startPoint.y;
            }
            return path;
        },
        linkPath() {
            if (typeof this.pathFunc === 'string') {
                return this[this.pathFunc];
            } else if (typeof this.pathFunc === 'function') {
                return this.pathFunc(
                    this.linkData,
                    this.startPoint,
                    this.endPoint
                );
            }
            throw new Error('linkPath 为 string 或 function');
        }
    },
    methods: {
        applyOpacity(opacity = 1) {
            if (this.transitionDuration) {
                select(this.$refs[`link-${this.linkData.data.id}`])
                    .transition()
                    .duration(this.transitionDuration)
                    .style('opacity', opacity);
            } else {
                select(this.$refs[`link-${this.linkData.data.id}`]).style(
                    'opacity',
                    opacity
                );
            }
        }
    },
    mounted() {
        this.applyOpacity();
    },
    beforeDestroy() {
        this.applyOpacity(0);
    }
};
</script>
